<template>
  <div>
    <el-button size="small" type="primary" @click="export2Excel">导出</el-button>
       <el-table
            v-loading="loading"
            :data="detailslist"
            ref="table"
            border
            highlight-current-row
            style="width: 100%">
            <el-table-column
               prop="merchantName"
               label="结算单位"
               v-if="formThead.merchantName.checked"
               align="center" 
             >
            </el-table-column>
            <el-table-column
               prop="Morning"
               label="上午"
               v-if="formThead.Morning.checked"
               align="center" 
            >
               <el-table-column
                  prop="expenditureMorning"
                  label="金额(元)"
                  v-if="formThead.expenditureMorning.checked"
                  align="center" 
               >
               </el-table-column>
               <el-table-column
                  prop="consumeCountMorning"
                  label="消费次数"
                  v-if="formThead.consumeCountMorning.checked"
                  align="center" 
               >
               </el-table-column>
            </el-table-column>
            <el-table-column
               prop="Lunch"
               label="中午"
               v-if="formThead.Lunch.checked"
               align="center" 
             >
               <el-table-column
                  prop="expenditureLunch"
                  label="金额(元)"
                  v-if="formThead.expenditureLunch.checked"
                  align="center" 
               >
               </el-table-column>
               <el-table-column
                  prop="consumeCountLunch"
                  label="消费次数"
                  v-if="formThead.consumeCountLunch.checked"
                  align="center" 
               >
               </el-table-column>
            </el-table-column>
            <el-table-column
               prop="Dinner"
               label="下午"
               v-if="formThead.Dinner.checked" 
               align="center" 
            >
                <el-table-column
                  prop="expenditureDinner"
                  label="金额(元)"
                  v-if="formThead.expenditureDinner.checked"
                  align="center" 
               >
               </el-table-column>
               <el-table-column
                  prop="consumeCountDinner"
                  label="消费次数"
                  v-if="formThead.consumeCountDinner.checked"
                  align="center" 
               >
               </el-table-column>
            </el-table-column>
            <el-table-column
               prop="Night"
               label="晚上"
               v-if="formThead.Night.checked"
               align="center"  
            >
                <el-table-column
                  prop="expenditureNight"
                  label="金额(元)"
                  v-if="formThead.expenditureNight.checked"
                  align="center" 
               >
               </el-table-column>
               <el-table-column
                  prop="consumeCountNight"
                  label="消费次数"
                  v-if="formThead.consumeCountNight.checked"
                  align="center" 
               >
               </el-table-column>
            </el-table-column>
            <el-table-column
               prop="Other"
               label="其余时间"
               v-if="formThead.Other.checked"
               align="center"  
            >
               <el-table-column
                  prop="expenditureOther"
                  label="金额(元)"
                  v-if="formThead.expenditureOther.checked"
                  align="center" 
               >
               </el-table-column>
               <el-table-column
                  prop="consumeCountOther"
                  label="消费次数"
                  v-if="formThead.consumeCountOther.checked"
                  align="center" 
               >
               </el-table-column>
            </el-table-column>
            <el-table-column
               prop="Sum"
               label="小计"
               v-if="formThead.Sum.checked" 
               align="center" 
            >
                <el-table-column
                  prop="expenditureSum"
                  label="金额(元)"
                  v-if="formThead.expenditureSum.checked"
                  align="center" 
               >
               </el-table-column>
               <el-table-column
                  prop="consumeCountSum"
                  label="消费次数"
                  v-if="formThead.consumeCountSum.checked"
                  align="center" 
               >
               </el-table-column>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangepage"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="recordCount"
            >
            </el-pagination>
        </div>   
  </div>
</template>

<script>
export default {
    data() {
        return {
            filename:'消费汇总',
            loading:false,
            exportlist:[],
            detailslist:[],
            pageNum:1,
            pageSize:10,
            currentPage:1,
            recordCount:0,
            searchInfo:{},
            tHeadercshie:[
                   "",
                   "金额(元)",
                   "消费次数",
                   "金额(元)",
                   "消费次数",
                   "金额(元)",
                   "消费次数",
                   "金额(元)",
                   "消费次数",
                   "金额(元)",
                   "消费次数",
                   "金额(元)",
                   "消费次数",
            ],
            //消费汇总
            formThead: {
                merchantName: {label: '结算单位',prop: 'merchantName',checked:true},
                Morning: {label: '上午',prop: 'Morning',checked:true},
                Lunch: {label: '中午',prop: 'Lunch',checked:true},
                Dinner: {label: '下午',prop: 'Dinner',checked:true},
                Night: {label: '晚上',prop: 'Night',checked:true},
                Other: {label: '其余时间',prop: 'Other',checked:true},
                Sum: {label: '小计',prop: 'Sum',checked:true},

                expenditureMorning: {label: '金额',prop: 'expenditureMorning',checked:true},
                consumeCountMorning: {label: '消费次数',prop: 'consumeCountMorning',checked:true},

                expenditureLunch: {label: '金额',prop: 'expenditureLunch',checked:true}, 
                consumeCountLunch: {label: '消费次数',prop: 'consumeCountLunch',checked:true},

                expenditureDinner: {label: '金额',prop: 'expenditureDinner',checked:true},
                consumeCountDinner: {label: '消费次数',prop: 'consumeCountDinner',checked:true},

                expenditureNight: {label: '金额',prop: 'expenditureNight',checked:true},
                consumeCountNight: {label: '消费次数',prop: 'consumeCountNight',checked:true},

                expenditureOther: {label: '金额',prop: 'expenditureOther',checked:true},
                consumeCountOther: {label: '消费次数',prop: 'consumeCountOther',checked:true},

                expenditureSum: {label: '金额',prop: 'expenditureSum',checked:true}, 
                consumeCountSum: {label: '金额',prop: 'consumeCountSum',checked:true},
                
            },
        }
    },
    mounted() {
        this.ceshi()
    },
    props: [ "datetime","unitGuid","consumptionpoint","radio"], 
    methods: {
        gestatistics(){
            if(this.datetime==null){
                this.searchInfo.startTime=''
                this.searchInfo.endTime=''
            }else{
                this.searchInfo.startTime=this.datetime[0]
                this.searchInfo.endTime=this.datetime[1]
            }
            this.searchInfo.unitGuid=this.unitGuid
            this.searchInfo.merchantGuid=this.consumptionpoint
            if(this.radio==0){
                this.searchInfo.timeType=0
            }else if(this.radio==1){
                this.searchInfo.timeType=1
            }else{
                this.searchInfo.timeType=2
            }
              
            this.loading=true
            this.$http({
                url: this.$http.adornUrl("/terminal/consume/consume-statistics-page"),
                method: "post",
                data: this.$http.adornData({
                    messageContent:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        searchInfo:this.searchInfo
                    },
                    messageType: 0
                })
            }).then(({ data }) => {
                 this.loading=false
                if (data.messageCode == 200) {
                    console.log(data)
                    this.detailslist=data.messageContent.data
                    this.recordCount = data.messageContent.recordCount;
                    this.currentPage=data.messageContent.pageNum
                }else{
                    this.$message.error(data.errorMessage)
                }
            });
        },
        handleSizeChange(val){
            this.pageSize=val
            this.gestatistics()
        },
        handleCurrentChangepage(val){
            this.pageNum=val
            this.gestatistics()
        },
        getHeaderDate(val){
            this.formThead=val
        },
        ceshi(){
            // this.tHeadercshie.splice(0,1)
            // console.log(this.tHeadercshie)
        },
        export(){
            if(this.detailslist.length==0){
              this.$message({
                   message: '查询数据后导出',
                   type: 'warning'
               });
               return false
            }
            if(this.datetime==null){
                this.searchInfo.startTime=''
                this.searchInfo.endTime=''
            }else{
                this.searchInfo.startTime=this.datetime[0]
                this.searchInfo.endTime=this.datetime[1]
            }
            this.searchInfo.unitGuid=this.unitGuid
            this.searchInfo.merchantGuid=this.consumptionpoint
            if(this.radio==0){
                this.searchInfo.timeType=0
            }else if(this.radio==1){
                this.searchInfo.timeType=1
            }else{
                this.searchInfo.timeType=2
            }
            this.$http({
                url: this.$http.adornUrl("/terminal/consume/consume-statistics-page"),
                method: "post",
                data: this.$http.adornData({
                    messageContent:{
                        pageNum:1,
                        pageSize:this.recordCount,
                        searchInfo:this.searchInfo
                    },
                    messageType: 0
                })
            }).then(({ data }) => {
                 this.loading=false
                if (data.messageCode == 200) {
                    this.exportlist=data.messageContent.data
                    setTimeout(() => {
                      this.export2Excel()
                    }, 100);
                }else{
                    this.$message.error(data.errorMessage)
                }
            });
        },
        formatJson(filterVal, jsonData) {
    　　　return jsonData.map(v =>
            filterVal.map(j => {
            if (j === "timestamp") {
                return parseTime(v[j]);
              } else {
                return v[j];
              }
            })
           );
    　　 },
        export2Excel() {
           const nowtime = new Date().getTime();
       　　 require.ensure([], () => {
               let multiHeader = [
               ]   
               let multiHeader2 = [
                    [
                        "结算",
                        "上午",
                        "",
                        "中午",
                        "",
                        "下午",
                        "",
                        "晚上",
                        "",
                        "其余时间",
                        "",
                        "小计",
                        "",
                    ]
               ] 
               let tHeader = [
                   "",
                   "金额(元)",
                   "消费次数",
                   "金额(元)",
                   "消费次数",
                   "金额(元)",
                   "消费次数",
                   "金额(元)",
                   "消费次数",
                   "金额(元)",
                   "消费次数",
                   "金额(元)",
                   "消费次数",
               ]
               let merges = [
                    "A1:A2",
                    "B1:C1",
                    "D1:E1",
                    "F1:G1",
                    "H1:I1",
                    "J1:K1",
                    "L1:M1",
               ]
               if(this.formThead.merchantName.checked==false){
                   multiHeader2[0].splice(0,1)
                   tHeader.splice(0,1)
                   merges.splice(0,1)
               }
               if(this.formThead.Morning.checked==false){
                   multiHeader2[0].splice(1,2)
                   tHeader.splice(1,2) 
                   merges.splice(1,1)
               }
               if(this.formThead.Lunch.checked==false){
                   multiHeader2[0].splice(3,2)
                   tHeader.splice(3,2) 
                   merges.splice(2,1)
               }
               if(this.formThead.Dinner.checked==false){
                   multiHeader2[0].splice(5,2)
                   tHeader.splice(5,2) 
                   merges.splice(3,1)
               }
               if(this.formThead.Night.checked==false){
                   multiHeader2[0].splice(7,2)
                   tHeader.splice(7,2) 
                   merges.splice(4,1)
               }
               if(this.formThead.Other.checked==false){
                   multiHeader2[0].splice(9,2)
                   tHeader.splice(9,2) 
                   merges.splice(5,1)
               }
               if(this.formThead.Sum.checked==false){
                   multiHeader2[0].splice(11,2)
                   tHeader.splice(11,2) 
                   merges.splice(6,1)
               }
               console.log(multiHeader2)
               console.log(tHeader)
               console.log(merges)
               let filterValArr = []
                if(this.formThead.merchantName.checked==true){
                    filterValArr.push(this.formThead.merchantName.prop)
                }
                if(this.formThead.expenditureMorning.checked==true){
                    filterValArr.push(this.formThead.expenditureMorning.prop)
                }
                if(this.formThead.consumeCountMorning.checked==true){
                    filterValArr.push(this.formThead.consumeCountMorning.prop)
                }
                if(this.formThead.expenditureLunch.checked==true){
                    filterValArr.push(this.formThead.expenditureLunch.prop)
                }
                if(this.formThead.consumeCountLunch.checked==true){
                    filterValArr.push(this.formThead.consumeCountLunch.prop)
                }
                if(this.formThead.expenditureDinner.checked==true){
                    filterValArr.push(this.formThead.expenditureDinner.prop)
                }
                if(this.formThead.consumeCountDinner.checked==true){
                    filterValArr.push(this.formThead.consumeCountDinner.prop)
                }
                if(this.formThead.expenditureNight.checked==true){
                    filterValArr.push(this.formThead.expenditureNight.prop)
                }
                if(this.formThead.consumeCountNight.checked==true){
                    filterValArr.push(this.formThead.consumeCountNight.prop)
                }
                if(this.formThead.expenditureOther.checked==true){
                    filterValArr.push(this.formThead.expenditureOther.prop)
                }
                if(this.formThead.consumeCountOther.checked==true){
                    filterValArr.push(this.formThead.consumeCountOther.prop)
                }
                if(this.formThead.expenditureSum.checked==true){
                    filterValArr.push(this.formThead.expenditureSum.prop)
                }
                if(this.formThead.consumeCountSum.checked==true){
                    filterValArr.push(this.formThead.consumeCountSum.prop)
                }

            //    const tHeader = []
       　　 　　const { export_json_to_excel } = require('../execl/Export2Excel'); 
               const filterVal = filterValArr
       　　 　  const list = [];
                console.log(list)
               const data = this.formatJson(filterVal, list);
       
       　　 　　export_json_to_excel({
                      multiHeader,//这里是第一行的表头
                      multiHeader2,//这里是第二行的表头
                      header:tHeader,
                      data,
                      merges,
                      filename: this.filename+nowtime
                });
       　　 })
        }, 
    },
}
</script>

<style lang="less" scoped>
.page{
        display: flex;
        justify-content: center;
        align-items: center;
    }  
</style>